<template>
	<view class="invite">
		<!-- <view style="margin:20rpx;border-radius:20rpx;padding:24rpx;background-color: #FFF;text-align: center;">
			<view style="font-size: 30rpx;font-weight: bold;color: #000000;">绑定上级</view>
			<view style="margin:24rpx auto;background-color: #F7F6FA;padding:16rpx;border-radius:20rpx;width:500rpx;">
				<input style="font-size: 28rpx;" v-model="yaomas" placeholder="请输入用户邀请码" />
			</view>
			<view class="buttonss" @click="queding">绑定</view>
			<button class="buttonss" open-type="share">分享</button>
		</view> -->
		<!-- <view style="margin:20rpx;border-radius:20rpx;padding:24rpx;background-color: #FFF;text-align: center;">
			<view style="font-size:30rpx;font-weight:bold;text-align: center;margin-bottom:20rpx;">邀请</view>
			<view class="flexJusp">
				<view></view>
				<view @click="fuzhi" style="background-color: #F7F6FA;padding:12rpx 20rpx;border-radius: 12rpx;">
					{{ yaoma }}
				</view>
				<view></view>
			</view>
			<button class="buttonss" open-type="share">微信分享</button>
		</view> -->
		<view class="postx">
			<view style="height: 90rpx;"></view>
			<view class="flexJusp"
				style="height: 30px; font-size: 36rpx;line-height: 31px; text-align: center;padding:0 20rpx;">
				<view @click="back">
					<image style="width:20rpx;height:34rpx;" src="/static/image/mv_tuichu.png"></image>
				</view>
				<view>邀请好友</view>
				<view></view>
			</view>
		</view>
		<view
			style="margin:20rpx;border-radius:20rpx;padding:24rpx;text-align: center; display: flex; justify-content: center; flex-direction: column;">
			<!-- <view style="font-size:30rpx;font-weight:bold;text-align: center;margin-bottom:20rpx;">邀请</view> -->
			<button class="buttonss" open-type="share">微信分享到群</button>
			<!-- <button class="buttonss" @click="generateMiniProgramCode">生成我的二维码码</button> -->
			<view class="image_textview">
				<view class="image_view">
					<image v-if="images" :src="images" alt="小程序码" @touchstart="startPress" @touchend="cancelPress"
						@touchcancel="cancelPress" />
				</view>
				<view class="image_text">个人推广码</view>
			</view>


			<!-- <img class="imagess" v-if="images" :src="images" alt="小程序码" @click="saveImageToLocal"> -->
		</view>

		<!-- <view style="margin:0 20rpx;border-radius:20rpx;padding:24rpx;background-color: #FFF;">
			<view style="font-size:30rpx;font-weight:bold;text-align: center;">邀请记录列表</view>
			<view class="flexJusp" v-for="(item,index) in list" :key="index"
				style="margin-top:28rpx;line-height: 72rpx;">
				<view class="flex">
					<image style="width: 72rpx;height: 72rpx;border-radius: 50%;" :src="item.icon"></image>
					<view style="margin-left:20rpx;">{{ item.nickname }}</view>
				</view>
				<view style="font-size:24rpx;color: #666;">{{ item.oktime }}</view>
			</view>
		</view> -->
		<view v-if="list.length"
			style="margin: 0 20rpx; border-radius: 20rpx; padding: 24rpx; background-color: #FFF;margin-top: 80rpx; ">
			<view class="yaoqing">邀请记录列表</view>
			<view>
				<view style="margin-top: 20rpx;">
					<view style="border-bottom: 1px solid #ccc;"></view>
						<view class="flexJusp flexJosn" v-for="(item,index) in list" :key="index">
							<view class="flex">
								<image style="width: 72rpx; height: 72rpx; border-radius: 50%;" :src="item.icon"></image>
								<view style="margin-left: 20rpx;">{{item.nickname}}</view>
							</view>
							<view style="font-size: 24rpx; color: #666;">{{item.oktime}}</view>
						</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// yaoma: '',
				// yaomas: '',
				list: [],
				supId: '',
				images: '',

			};
		},
		onLoad(option) {
			this.supId = option.supId
			this.loads()
			this.shareConfig()
			this.generateMiniProgramCode();
		},
		methods: {
			back() {
				uni.navigateBack()
			},
			startPress() {
				this.pressTimer = setTimeout(() => {
					this.saveImageToLocal();
				}, 500); // 设置长按时间阈值，单位毫秒
			},
			cancelPress() {
				clearTimeout(this.pressTimer);
			},
			// 生成小程序码
			generateMiniProgramCode() {
				let data = {
					scene: this.supId,
					page: "pages/login/MasterSettlement/MasterSettlement",
				}
				this.$httpapi('workerShareQR', 'POST', data).then(res => {
					// 隐藏加载框
					uni.hideLoading();
					// 将 arraybuffer 转换为 base64
					this.images = 'data:image/png;base64,' + res.data;
				})
			},
			loads() {
				// this.$httpapi('selectuserinfo', 'POST', {}).then(res => {
				// 	this.yaoma = res.data.tuima
				// })
				this.$httpapi('userlist', 'POST', {}).then(res => {
					this.list = res.data
				})
			},
			shareConfig() {
        let that = this
				// 配置分享内容
				uni.showShareMenu({
					withShareTicket: true,
					menus: ['shareAppMessage', 'shareTimeline'],
					title: '忒娃到家，你的家居快捷助手',
					path: `/pages/login/login?supId=${this.supId}`,
          imageUrl: that.$loadImage("logo"),
					success: function() {
						console.log('分享菜单设置成功');
					},
					fail: function(err) {
						console.error('分享菜单设置失败', err);
					}
				});
			},
			queding() {
				this.$httpapi('binduser', 'POST', {
					tuima: this.yaomas
				}).then(res => {
					uni.showToast({
						title: res.msg,
						duration: 1500,
						icon: 'none'
					});
				})
			},
			onShareAppMessage(res) {
        let that = this
				let path = `/pages/login/login?supId=${this.supId}`
				return {
					title: '忒娃到家，你的家居快捷助手',
          imageUrl: that.$loadImage("logo"),
					path: path,
				}
			},
			onShareTimeline(res) {
        let that = this
				let path = `/pages/login/login?supId=${this.supId}`
				return {
					title: '忒娃到家，你的家居快捷助手',
          imageUrl: that.$loadImage("logo"),
					path: path,
				}
			},
			// 点击保存图片到本地
			saveImageToLocal() {
				const base64Img = this.images.replace(/^data:image\/\w+;base64,/, '');
				uni.getSetting({
					success: (res) => {
						if (!res.authSetting['scope.writePhotosAlbum']) {
							// 用户未授权保存到相册
							uni.authorize({
								scope: 'scope.writePhotosAlbum',
								success: () => {
									this.saveImage(base64Img); // 已授权，则执行保存图片操作
								},
								fail: () => {
									uni.showToast({
										title: '未授权保存到相册,请点击左上角三个点进入设置页授予添加到相册权限',
										icon: 'none',
										duration: 1500
									});
								}
							});
						} else {
							// 已授权，则直接保存图片
							this.saveImage(base64Img);
						}
					}
				});
			},
			saveImage(base64Img) {
				uni.getFileSystemManager().writeFile({
					filePath: `${wx.env.USER_DATA_PATH}/temp-image.png`,
					data: base64Img,
					encoding: 'base64',
					success: () => {
						uni.saveImageToPhotosAlbum({
							filePath: `${wx.env.USER_DATA_PATH}/temp-image.png`,
							success: () => {
								uni.showToast({
									title: '保存成功',
									icon: 'success',
									duration: 1500
								});
							},
							fail: (err) => {
								uni.showToast({
									title: '取消保存到本地',
									icon: 'none',
									duration: 1500
								});
							}
						});
					},
					fail: (err) => {
						uni.showToast({
							title: '保存失败',
							icon: 'none',
							duration: 1500
						});
					}
				});
			},
			// fuzhi() {
			// 	var that = this
			// 	uni.setClipboardData({
			// 		data: that.yaoma,
			// 		success() {
			// 			uni.showToast({
			// 				title: '复制成功',
			// 				icon: 'success'
			// 			});
			// 		}
			// 	});
			// }
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F7F6FA;
	}

	.invite {
		background: linear-gradient(to top right, #dddbdb, rgb(134, 204, 255));
		// padding-bottom: 100rpx;
		display: flex;
		flex-direction: column;
		height: 100vh;

		.yaoqing {
			height: 50rpx;
			font-size: 30rpx;
			font-weight: bold;
			text-align: center;

		}

		.flexJosn {
			// border-bottom: 1px solid #ccc;
			line-height: 72rpx;
		}
		.flex {

		}

		.image_textview {
			width: 60%;
			height: 430rpx;
			background-color: #FFF;
			border-radius: 15rpx;
			margin: auto;
			margin-top: 50rpx;

			.image_view {
				width: 316rpx;
				height: 306rpx;
				// max-width: 346rpx;
				// max-height: 356rpx;
				margin: 10rpx auto;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				border-radius: 10rpx;
				background-color: #FFF;
				margin-top: 45rpx;

				image {
					width: 100%;
					height: 100%;

				}

			}

			.image_text {
				margin-top: 23rpx;
			}
		}

		.buttonss {
			  background: linear-gradient(to right, rgb(151, 200, 255), rgb(63, 151, 254));
			  display: block;
			  width: 100%;
			  max-width: 150px;
			  /* Adjust width as needed */
			  margin: 10px auto;
			  /* Centers the buttons horizontally */
			  // padding: 15px;
			  background-color: #c2c1c1;
			  // color: white;
			  border: 0;
			  border-radius: 10px;
			  font-size: 16px;
			  cursor: pointer;
			  color: #ffffff;
			  outline: none;
		}
	}
</style>
